<template>
  <div class="app-container">
    <div id="chart" style="width:100%;height: 300px">
      <div id="histogram" style="width: 350px;height: 100%;float: left;margin-left: 180px"></div>
      <div id="pie" style="width: 350px;height: 100%;float:right;margin-right: 180px"></div>
    </div>
    <el-card style="width: 100%;margin: 20px 0;">
      <el-form :model="queryParams" ref="queryForm" size="mini" :inline="true" v-show="showSearch" label-width="100px">
        <el-form-item label="姓名" prop="name">
          <el-input
            v-model="queryParams.eimDataPerson.name"
            placeholder="请输入"
            clearable
            size="mini"
            style="width: 240px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="联系方式" prop="phone">
          <el-input
            v-model="queryParams.eimDataPerson.phone"
            placeholder="请输入"
            clearable
            size="mini"
            style="width: 240px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="现居地" prop="address">
          <el-input
            v-model="queryParams.eimDataPerson.address"
            placeholder="请输入"
            clearable
            size="mini"
            style="width: 240px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="任务类型" prop="type">
          <el-select
            v-model="queryParams.type"
            placeholder="请选择"
            clearable
            style="width: 240px"
          >
            <el-option
              size="mini"
              style="width: 100px"
              v-for="dict in dict.type.sys_group_task"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select
            v-model="queryParams.status"
            placeholder="请选择"
            clearable
            style="width: 240px"
          >
            <el-option
              size="mini"
              style="width: 100px"
              v-for="dict in dict.type.sys_task_status"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" style="margin: 0 40px" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>


    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['eim:schedule:add']"
        >创建调度</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['eim:schedule:export']"
        >导出</el-button>
        <el-col :span="1.5">
          <el-button
            v-show="!showDispatchList"
            type="primary"
            plain
            icon="el-icon-menu"
            size="mini"
            @click="handleDispatchList"
          >批量分配</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            v-show="showDispatchList"
            type="primary"
            plain
            icon="el-icon-menu"
            size="mini"
            @click="handleDispatchList"
          >取消批量分配</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            v-show="showDispatchList"
            type="primary"
            plain
            icon="el-icon-menu"
            size="mini"
            @click="doDispatchList()"
          >去分配</el-button>
        </el-col>
      </el-col>
        <el-col :span="1.5" v-show="true">
          <el-badge :value="cases" :max="99" class="item">
            <el-button size="mini" icon="el-icon-bell" round type="danger" plain @click="showNewCases">新增病例</el-button>
          </el-badge>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" ref="multipleTable" :data="scheduleList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" v-if="showDispatchList"></el-table-column>
      <el-table-column label="姓名" align="center" prop="eimDataPerson.name" />
      <el-table-column label="性别" align="center" prop="sex">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.eimDataPerson.sex"/>
        </template>
      </el-table-column>
      <el-table-column label="联系电话" align="center" prop="eimDataPerson.phone" />
      <el-table-column label="现居地" align="center" prop="eimDataPerson.address" />
      <el-table-column label="人员类型" align="center" prop="eimDataPerson.ifDiagnosis">
        <template slot-scope="scope">
          {{scope.row.eimDataPerson.ifDiagnosis==1?'确诊病例':scope.row.eimDataPerson.ifCloseContact==1?'密接人员':'一般接触人员'}}
        </template>
      </el-table-column>
      <el-table-column label="任务类型" align="center" prop="type">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_group_task" :value="scope.row.type"/>
        </template>
      </el-table-column>
      <el-table-column label="分配小组" align="center" prop="groupName" />
      <el-table-column label="负责人" align="center" prop="executor" />
      <el-table-column label="状态" align="center" prop="status">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_task_status" :value="scope.row.status"/>
        </template>
      </el-table-column>
      <el-table-column label="操作"  fixed="right" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            v-show="scope.row.status=='0'"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
          >编辑</el-button>
          <el-button
            v-show="scope.row.status=='0'"
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          >删除</el-button>
          <el-button
            v-show="scope.row.status=='0'"
            size="mini"
            type="text"
            icon="el-icon-s-management"
            @click="handleDispatch(scope.row)"
          >分配</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-document"
            @click="showDetail(scope.row)"
          >查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改指挥调度工单对话框 -->
    <el-dialog :title="title"  center :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="任务标题" prop="title">
          <el-input v-model="form.title" placeholder="请输入任务标题" />
        </el-form-item>
        <el-form-item label="任务类型" prop="type">
          <el-select v-model="form.type" placeholder="请选择任务类型" style="width: 100%" @change="showTaskGroup(form.type)">
            <el-option
              v-for="dict in dict.type.sys_group_task"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="任务对象" prop="idCard">
          <el-select v-model="form.idCard" placeholder="请选择任务对象" :disabled="disabled" @change="showPatientDetail(form.idCard)" style="width: 100%">
            <el-option
              v-for="patient in patientList"
              :key="patient.personId"
              :label="patient.name"
              :value="patient.personId"
            ></el-option>
          </el-select>
          <el-card v-if="form.idCard!='' && form.idCard!=undefined" class="box-card" v-model="patientDetail">
            <div slot="header" class="clearfix">
              <span>详情展示</span>
              <el-tag style="float: right">{{patientDetail.ifDiagnosis==1?'确诊病例':patientDetail.ifCloseContact==1?'密接人员':'一般接触人员'}}</el-tag>
              <el-tag style="float: right;margin-right: 10px" v-if="showType">需求任务类型:{{patientDetail.controlStatus==0?patientDetail.ifDiagnosis==1?'120转运':'核酸检测':'采样消杀'}}</el-tag>
            </div>
            <div class="text item">
              <span style="width: 120px;display: inline-block">姓名:</span>{{patientDetail.name}}
            </div>
            <div class="text item">
              <span style="width: 120px;display: inline-block">性别:</span><dict-tag style="display: inline" :options="dict.type.sys_user_sex" :value="patientDetail.sex"/>
            </div>
            <div class="text item">
              <span style="width: 120px;display: inline-block">身份证号/护照号:</span>{{form.idCard}}
            </div>
            <div class="text item">
              <span style="width: 120px;display: inline-block">联系方式:</span>{{patientDetail.phone}}
            </div>
            <div class="text item">
              <span style="width: 120px;display: inline-block">现居住地:</span>{{patientDetail.address}}
            </div>
          </el-card>
        </el-form-item>
          <el-form-item label="负责小组">
            <el-select v-model="form.groupId" placeholder="请选择负责小组" style="width: 100%">
              <el-option
                v-for="group in taskGroup"
                :key="group.id"
                :label="group.name"
                :value="group.id"
              ></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="转运隔离点" v-if="form.type=='3'" prop="quarantineAddress">
          <el-select v-model="form.quarantineAddress" placeholder="请选择转运隔离点" style="width: 100%">
            <el-option
              v-for="address in quarantineAddressList"
              :key="address"
              :label="address"
              :value="address"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="截止时间" prop="blockingTime">
          <el-date-picker clearable
            v-model="form.blockingTime"
            style="width: 100%"
            type="datetime"
            placeholder="请选择截止时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            align="right">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="工单内容描述" prop="description">
          <el-input v-model="form.description" placeholder="请输入工单内容描述" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 查看指挥调度工单详情 -->
    <el-dialog title="指挥调度单详情" center :visible.sync="openDetail" width="800px">
      <div style="width:100%;height:500px">
        <div style="float: left;width: 460px;height: 500px;" >
          <el-card class="box-card" v-model="form">
            <div style="float: right">
              <dict-tag style="display: inline" :options="dict.type.sys_task_status" :value="form.status"/>
            </div>
            <div class="text item" style="margin-bottom: 10px">
              <span style="width: 120px;display: inline-block">*任务标题:</span>{{form.title}}
            </div>
            <div class="text item" style="margin-bottom: 10px">
              <span style="width: 120px;display: inline-block">*任务类型:</span><dict-tag style="display: inline" :options="dict.type.sys_group_task" :value="form.type"/>
            </div>
            <div style="margin-bottom: 10px">
              <span style="width: 120px;display: inline-block">任务对象:</span>
                <el-card v-if="form.idCard!='' && form.idCard!=undefined" class="box-card" v-model="patientDetail" style="margin-top: 5px">
                  <div slot="header" class="clearfix">
                    <span>详情展示</span>
                    <el-tag style="float: right">{{patientDetail.ifDiagnosis==1?'确诊病例':patientDetail.ifCloseContact==1?'密接人员':'一般接触人员'}}</el-tag>
                  </div>
                  <div class="text item">
                    <span style="width: 120px;display: inline-block">姓名:</span>{{patientDetail.name}}
                  </div>
                  <div class="text item">
                    <span style="width: 120px;display: inline-block">性别:</span><dict-tag style="display: inline" :options="dict.type.sys_user_sex" :value="patientDetail.sex"/>
                  </div>
                  <div class="text item">
                    <span style="width: 120px;display: inline-block">身份证号/护照号:</span>{{form.idCard}}
                  </div>
                  <div class="text item">
                    <span style="width: 120px;display: inline-block">联系方式:</span>{{patientDetail.phone}}
                  </div>
                  <div class="text item">
                    <span style="width: 120px;display: inline-block">现居住地:</span>{{patientDetail.address}}
                  </div>
                </el-card>
            </div>
            <div class="text item" style="margin-bottom: 10px">
              <span style="width: 120px;display: inline-block">截止时间:</span>{{form.blockingTime}}
            </div>
            <div class="text item" style="margin-bottom: 10px">
              <span style="width: 120px;display: inline-block">完成时间:</span>{{form.finishTime==undefined||form.finishTime==''?'--':form.finishTime}}
            </div>
            <div class="text item" style="margin-bottom: 10px">
              <span style="width: 120px;display: inline-block">分配小组:</span>{{form.groupId}}
            </div>
            <div class="text item" style="margin-bottom: 10px">
              <span style="width: 120px;display: inline-block">负责人:</span>{{form.executor==undefined?'--':form.executor}}
            </div>
            <div class="text item" v-if="form.type=='3'" style="margin-bottom: 10px">
              <span style="width: 120px;display: inline-block">隔离地点:</span>{{form.quarantineAddress}}
            </div>
            <div class="text item" style="margin-bottom: 10px">
              <span style="width: 120px;display: inline-block">任务描述:</span>{{form.description}}
            </div>
          </el-card>
        </div>
        <div style="float: right;width: 280px;height: 500px;">
          <el-card class="box-card">
            <div style="text-align: left;margin-top: 20px">任务日志</div>
            <div class="block">
              <div class="radio" style="margin: 10px 0">
                排序：
                <el-radio-group v-model="reverse">
                  <el-radio :label="true">倒序</el-radio>
                  <el-radio :label="false">正序</el-radio>
                </el-radio-group>
              </div>

              <el-timeline :reverse="reverse">
                <el-timeline-item
                  v-for="(activity, index) in this.taskLogList"
                  :key="index"
                  :timestamp="activity.timestamp">
                  {{activity.content}}
                </el-timeline-item>
              </el-timeline>
            </div>
          </el-card>
        </div>
      </div>
    </el-dialog>

    <!-- 分配指挥调度工单对话框 -->
    <el-dialog title="分配调度单" center :visible.sync="open1" width="300px" append-to-body>
      <template>
        <el-radio-group v-model="group">
          <div  v-for="group in taskGroup">
            <el-radio :label="group.id">{{group.name}}</el-radio>
          </div>
        </el-radio-group>
      </template>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm1">确 定</el-button>
        <el-button @click="cancel1">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { listSchedule, delSchedule, addSchedule, updateSchedule, listQuarantineAddress, dispatchSchedule } from "@/api/eim/schedule";
import { listPatient } from "@/api/eim/person";
import { listTaskGroup } from "@/api/system/organization";
import {getToken} from "@/utils/auth";
import {showProportion, showTypeProportion} from "../../../api/eim/schedule";
import {getLogList} from "@/api/eim/log";

let scheduleSocket;
export default {
  name: "Schedule",
  dicts: ['sys_task_status', 'sys_user_sex','sys_group_task'],
  data() {
    return {
      // 遮罩层
      loading: true,
      //当前登录用户
      user: {},
      //新增病例和密接数量
      cases: 0,
      // 选中工单id数组
      ids: [],
      // 选中工单数组
      dispatchScheduleList: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 指挥调度工单表格数据
      scheduleList: [],
      // 指挥调度工单不同类型列表
      scheduleTypeList : [],
      // 指挥调度工单不同类型数量列表
      scheduleTypeCountList : [],
      // 弹出层标题
      title: "",
      // 是否显示添加或修改工单弹出层
      open: false,
      // 是否显示分配工单弹出层
      open1: false,
      // 是否显示指挥工单详情
      openDetail: false,
      // 是否显示取消批量分配按钮
      showDispatchList: false,
      // 工单id
      commandScheduleId:null,
      //执行任务小组
      group: null,
      // 未管控居民信息表格数据
      patientList: [],
      //病例或者确诊详情信息
      patientDetail: {},
      //执行任务小组列表
      taskGroup: [],
      //转运隔离点列表
      quarantineAddressList:[],
      //任务对象是否可编辑
      disabled:false,
      //是否显示任务类型
      showType:true,
      //是否按时间倒叙显示任务日志
      reverse: true,
      // 查看详情中显示的日志列表
      taskLogList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        title: null,
        type: null,
        idCard: null,
        eimDataPerson:{
          name:null,
          phone:null,
          address:null
        },
        groupId: null,
        executor: null,
        status: null,
        description: null,
        blockingTime: null,
        finishTime: null,
        quarantineAddress: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        type: [
          { required: true, message: "任务类型不能为空", trigger: "change" }
        ],
        idCard: [
          { required: true, message: "任务对象证件号不能为空", trigger: "blur" }
        ],
        quarantineAddress: [
          { required: true, message: "转运隔离地点不能为空", trigger: "change" }
        ],
      }
    };
  },
  created() {
    this.getList();
    listPatient().then(res=>{
      this.patientList=res.data;
    });
    listQuarantineAddress().then(res=>{
      this.quarantineAddressList=res.data;
    })
    let url = 'ws://127.0.0.1:8080/webSocket/' + getToken();
    scheduleSocket = new WebSocket(url);
    scheduleSocket.onopen = function(){
      //当WebSocket创建成功时，触发onopen事件
      console.log("open");
      scheduleSocket.send("hello"); //将消息发送到服务端
    }
    scheduleSocket.onmessage = e=>{
      //当客户端收到服务端发来的消息时，触发onmessage事件，参数e包含server传递过来的数据
      this.cases=parseInt(e.data);
    }
  },
  methods: {
    /** 查询指挥调度工单列表 */
    getList() {
      this.loading = true;
      listSchedule(JSON.stringify(this.queryParams)).then(response => {
        this.scheduleList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 取消按钮
    cancel1() {
      this.open1 = false;
      this.group=null;
    },
    // 表单重置
    reset() {
      this.form = {};
      this.patientDetail={};
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.dispatchScheduleList = selection
      this.ids = selection.map(item=>item.id);
      console.log(this.dispatchScheduleList);
    },
    // 切换批量分配按钮显示
    handleDispatchList(){
      this.showDispatchList=!this.showDispatchList;
      this.$refs.multipleTable.clearSelection();
      this.ids = [];
      this.dispatchScheduleList = [];
    },
    // 批量分配处理
    doDispatchList(){
      if(this.dispatchScheduleList.length>0){
        this.showTaskGroup(this.dispatchScheduleList[0].type);
        this.open1 = true;
      }else {
        this.$modal.msgWarning("未选中要分配的小组");
      }
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.disabled = false;
      this.showType = true;
      this.open = true;
      this.title = "添加指挥调度工单";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.showTaskGroup(row.type);
      this.reset();
      this.form=row;
      this.showTaskGroup(this.form.type);
      this.showClickPatientDetail(row.idCard);
      this.disabled = true;
      this.showType = false;
      this.title = "修改指挥调度工单";
      this.open = true;
    },
    /** 查看工单详情 */
    showDetail(row){
      this.openDetail=true;
      this.reset();
      this.taskLogList=[];
      this.form=row;
      this.showTaskGroup(this.form.type);
      this.showClickPatientDetail(this.form.idCard);
      this.showType = false;
      getLogList(row.id).then(res=>{
        let arr=res.rows;
        for(let i=0;i<arr.length;i++){
          let type=arr[i].taskType=='0'?'病例流调':arr[i].taskType=='1'?'采样消杀':arr[i].taskType=='2'?'核酸检测':'120转运';
          let status=this.selectDictLabel(this.dict.type.sys_task_status,arr[i].taskStatus);
          let content=type+" "+status;
          let timestamp=arr[i].createTime;
          if(i==arr.length-1) {
            this.taskLogList.push({'content':content,'timestamp':timestamp,'color':'#000'})
          }else {
            this.taskLogList.push({'content':content,'timestamp':timestamp})
          }
        }
        console.log(res.rows);
      })
    },
    /** 分配小组 */
    handleDispatch(row){
      this.commandScheduleId = row.id;
      this.showTaskGroup(row.type);
      this.open1 = true;
    },
    /** 根据任务类型选择执行小组列表 */
    showTaskGroup(val){
      listTaskGroup(val).then(res=>{
        this.taskGroup=res.data;
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.form.eimDataPerson=this.patientDetail
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateSchedule(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addSchedule(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
              listPatient().then(res=>{
                this.patientList=res.data;
              });
            });
          }
        }
      });
    },
    /** 分配工单 */
    submitForm1() {
      let idList=[];
      idList.push(this.commandScheduleId);
      let query={
        groupId:this.group,
        ids:this.ids.length==0?idList:this.ids
      }
      dispatchSchedule(JSON.stringify(query)).then(res=>{
        this.$modal.msgSuccess("分配成功");
        this.open1 = false;
        this.ids = [];
        this.commandScheduleId = null;
        this.group = null;
        this.dispatchScheduleList = [];
        this.getList();
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除指挥调度工单编号为"' + ids + '"的数据项？').then(function() {
        return delSchedule(row);
      }).then(() => {
        this.getList();
        listPatient().then(res=>{
          this.patientList=res.data;
        });
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('eim/schedule/export', {
        ...this.queryParams
      }, `schedule_${new Date().getTime()}.xlsx`)
    },
    /** 查看未管控病例详情 */
    showPatientDetail(val){
      for(let p of this.patientList){
        if (p.personId == val){
          this.patientDetail=JSON.parse(JSON.stringify(p));
          break;
        }
      }
    },
    /** 查看选中工单病例详情 */
    showClickPatientDetail(val){
      for(let p of this.scheduleList){
        if (p.idCard == val){
          this.patientDetail=p.eimDataPerson;
          break;
        }
      }
    },
    /** */
    showNewCases(){
      this.cases=0;
      this.getList();
    }
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    let myChart1 = echarts.init(document.getElementById("histogram"));
    // 指定图表的配置项和数据
    let option1 = {
      title: {
        text: '不同工单类型分布',
        x:'center', //水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
        y: 'bottom',
        textStyle: {
          fontWeight: 'normal',
          color: '#000',
          fontSize: 16,
          fontFamily: 'Gotham-Book'
        }
      },
      tooltip: {},
      legend: {
        data: ["工单数量"],
      },
      xAxis: {
        data: [],
      },
      yAxis: {},
      series: [
        {
          name: "工单数量",
          type: "bar",
          barWidth: 25,
          //设置柱状图渐变颜色
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                offset: 0,
                color: "#1268f3" // 0% 处的颜色
              }, {
                offset: 0.6,
                color: "#08a4fa" // 60% 处的颜色
              }, {
                offset: 1,
                color: "#01ccfe" // 100% 处的颜色
              }], false)
            }
          },
          data: [],
        },
      ],
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart1.setOption(option1);
    let myChart2 = echarts.init(document.getElementById("pie"))
    // 需要设置给饼图的数据
    let option2 = {
      //饼图不是直角坐标系图表，就不用配置x轴和y轴了
      series: [
        {
          name: '不同工单进展状态',
          center: ['50%' ,'50%'],
          radius: ['30%', '50%'],
          type: 'pie',
          data: []
        }
      ],
      title: {
        text: '不同工单进展状态',
        x:'center', //水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
        y: 'bottom',
        textStyle: {
          fontWeight: 'normal',
          color: '#000',
          fontSize: 16,
          fontFamily: 'Gotham-Book'
        }
      },
      tooltip: {},
      legend: {},
    }
    myChart2.setOption(option2);
    showProportion().then(response=>{
      myChart2.setOption({
        series: [{
          data:response.data
        }]
      });
    });
    showTypeProportion().then(response=>{
      let data = response.data;
      let len = data.length;
      this.scheduleTypeList = [];
      this.scheduleTypeCountList = [];
      for(let i=0; i<len; i++){	//for循环遍历出来
        //数据库的值分别赋给scheduleTypeList和scheduleTypeCountList数组
        this.scheduleTypeList.push(data[i].name);
        this.scheduleTypeCountList.push(data[i].value);
      }
      myChart1.setOption({
        xAxis: {
          data: this.scheduleTypeList,
        },
        series: [
          {
            data: this.scheduleTypeCountList,
          },
        ],
      })
    });
  },

};
</script>
